<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- vue -->
    <script th:src="@{js/vue2.6.14.js(t=${time})}"></script>
    <!-- jquery -->
    <script th:src="@{js/jquery3.7.1.js(t=${time})}"></script>
    <!-- element-ui -->
    <link rel="stylesheet" th:href="@{css/element-ui-2.15.4.css(t=${time})}" >
    <script th:src="@{js/element-ui-2.15.4.js(t=${time})}"></script>
    <script th:src="@{js/common.js(t=${time})}"></script>
    <script th:src="@{js/particles.min.js(t=${time})}"></script>
    <title>登录</title>
</head>
<body>
    <div id="app">
        <div id="login-form-view">
            <el-card>
                <div class="register-view">
                    <el-link class="register" href="/register" type="primary">注册</el-link>
                </div>
                <el-row :gutter="1">
                    <el-col><h1>登录</h1></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4" :offset="2">
                        <span class="form-title">用户名</span>
                    </el-col>
                    <el-col :span="13">
                        <el-input placeholder="请输入用户名" v-model="form.username" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4" :offset="2">
                        <span class="form-title">密码</span>
                    </el-col>
                    <el-col :span="13">
                        <el-input placeholder="请输入密码" v-model="form.password" clearable show-password></el-input>
                    </el-col>
                </el-row>
                <div class="buttons">
                    <div>
                        <el-button id="login-button" type="primary" @click="login">登录</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</body>

<script>
const vapp = new Vue({
    el: "#app",
    data: {
        form: {
            username: "",
            password: ""
        }
    },
    created() {
        window.vue = this;
    },
    mounted() {
        particlesJS.load('app', 'assets/particles.json', function() {
            console.log('callback - particles.js config loaded');
        });
    },
    methods: {
        login() {
            postRequest("/login", vapp.form, function (result) {
                console.log(result)
                if (result.code != 0) {
                    vapp.$message({
                        message: result.msg,
                        type: 'error'
                    });
                } else {
                    window.location.href = "/index";
                }
            });

        }
    }
})
</script>

<style>
    body {
        /* 加载背景图 */
        /*background-image: url("images/login-background.png");*/
        background-image: url("images/login-background-5.jpg");
        /* 背景图垂直、水平均居中 */
        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        background-color: #464646;
        margin:0px;
    }

    canvas {
        position: fixed;
        z-index: -1;
    }

    #app {
        display: flex;
    }

    #login-form-view {
        position: absolute;
        display: flex;
        left: calc((100% - 450px) / 2);
        top: calc(10%);
    }

    .el-card {
        width: 450px;
        padding-bottom: 50px;
        background: rgba(255,255,255, 0.7);
        margin: 0 auto;
        margin-top: calc(13%);
    }

    .register-view {
        display: flex;
    }

    .register-view a {
        margin-left: auto;
    }

    .el-card h1 {
        /* element-ui颜色*/
        color: #409eff;
        text-align: center;
    }

    .el-row {
        margin: 20px 0px;
    }

    .form-title {
        line-height: 40px;
    }

    .buttons {
        display: flex;
    }
    .buttons div {
        margin: 0 auto;
    }
    #login-button {
        width: 200px;
    }

</style>
</html>